<template>
	<view class="qrcode-container">
		<u-qrcode v-show="isQRCodeVisible" :value="value" :size="computedSize" :backgroundColor="backgroundColor"
			:foregroundColor="foregroundColor" :padding="padding" :canvasId="canvasId" @error="handleError"></u-qrcode>
	</view>
</template>

<script>
	export default {
		name: "QRCode",
		props: {
			value: {
				type: String,
				required: true
			},
			size: {
				type: Number,
				default: 200
			},
			backgroundColor: {
				type: String,
				default: "#FFFFFF"
			},
			foregroundColor: {
				type: String,
				default: "#000000"
			},
			padding: {
				type: Number,
				default: 10
			},
			canvasId: {
				type: String,
				default: "qrcode-canvas"
			},
			isQRCodeVisible: {
				type: Boolean,
				default: true
			}
		},
		computed: {
			computedSize() {
				return uni.upx2px(this.size); // Convert upx to px
			}
		},
		methods: {
			handleError(error) {
				console.error("QR Code generation error:", error);
			}
		}
	};
</script>

<style scoped>
	.qrcode-container {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>